<!-- 班级主页 -->
<script setup lang="ts">
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchClassDetailAPI } from '@/apis/fetchClassDetail'
import { canAssessmentAPI } from '@/apis/canAssessment'

import cardIcon0 from '@/static/images/classHome/card_0.png'
import cardIcon1 from '@/static/images/classHome/card_1.png'
import cardIcon2 from '@/static/images/classHome/card_2.png'
import cardIcon3 from '@/static/images/classHome/card_3.png'
import cardIcon4 from '@/static/images/classHome/card_4.png'
import cardIcon5 from '@/static/images/classHome/card_5.png'
import cardIcon6 from '@/static/images/classHome/card_6.png'
import cardIcon7 from '@/static/images/classHome/card_7.png'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const classId = ref('')
// 班级详情数据
const classDetail = ref<ClassDetail | null>(null)
// 是否处于加载中状态
const loading = ref(false)

// 是否可以参与评估
const canAssessment = ref(false)

onLoad(async (options) => {
  if (options && options.id) {
    try {
      classId.value = options.id
      loading.value = true

      // 获取班级详情数据
      const res = await fetchClassDetailAPI(classId.value, userInfoStore.userInfo!.token!)

      if (res.data?.code === 1)
        classDetail.value = res.data.data
      else
        uni.showToast({ title: res.data?.msg, icon: 'none' })

      await updateCanAssessment(classId.value)

      loading.value = false
    }
    catch (err) {
      uni.showToast({ title: JSON.stringify(err), icon: 'none' })
    }
  }
  else {
    uni.showToast({ title: '数据获取失败', icon: 'none' })
  }
})

onShow(() => {
  updateCanAssessment(classId.value)
})

async function updateCanAssessment(classId: string) {
  // 获取是否可以参与评估
  const cRes = await canAssessmentAPI(classId, userInfoStore.userInfo!.token!)

  if (cRes.data?.code === 1)
    canAssessment.value = !cRes.data.data
  else
    uni.showToast({ title: cRes.data?.msg, icon: 'none' })
}

/**
 * @description 点击“扫码签到”卡片触发
 */
function handleTapScanQRCode() {
  uni.scanCode({
    onlyFromCamera: true,
    hideAlbum: true,
    success: (res) => {
      uni.navigateTo({
        url: `/${res.path}`,
      })
    },
  })
}

/**
 * @description 点击“培训资料”卡片触发
 */
function handleTapTrainingResources() {
  router.push({
    name: 'trainingResources',
    params: { class_id: classDetail.value?.id.toString() || '' },
  })
}

/**
 * @description 点击“班级通讯录”卡片触发
 */
function handleTapContacts() {
  router.push({
    name: 'contacts',
    params: { class_id: classDetail.value?.id.toString() || '' },
  })
}

/**
 * @description 点击“班级交流”卡片触发
 */
function handleTapClassExchange() {
  router.push({
    name: 'chatList',
    params: { class_id: classDetail.value?.id.toString() || '' },
  })
}

/**
 * @description 点击“课程安排”卡片触发
 */
function handleTapCourseSchedule() {
  router.push({
    name: 'courseSchedule',
    params: { class_id: classDetail.value?.id.toString() || '' },
  })
}

/**
 * @description 点击“班级相册”卡片触发
 */
function handleTapClassPhotos() {
  router.push({
    name: 'photos',
    params: { class_id: classDetail.value?.id.toString() || '' },
  })
}

/**
 * @description 点击“教学评估”卡片触发
 */
function handleTapAssessment() {
  if (!canAssessment.value) {
    uni.showToast({ title: '您已参与评估', icon: 'none' })
    return
  }

  router.push({
    name: 'assessment',
    params: { class_id: classDetail.value?.id.toString() || '' },
  })
}

/**
 * @description 点击“班级动态”卡片触发
 */
function handleTapClassNews() {
  router.push({
    name: 'classNews',
    params: { class_id: classDetail.value?.id.toString() || '' },
  })
}
</script>

<template>
  <view class="absolute left-0 top-0 z-0">
    <uv-image :src="withDomain(classDetail?.images!)!" width="750rpx" height="529rpx">
      <template #loading>
        <uv-loading-icon color="#666666" />
      </template>
    </uv-image>
  </view>
  <view class="relative z-1">
    <Spacer height="475" />
    <!-- 标题卡片 START -->
    <view class="rounded-20rpx bg-white px-25rpx pb-25rpx pt-20rpx card-shadow">
      <view class="text-36rpx text-#333333 font-medium leading-50rpx">
        {{ classDetail?.title || '未知标题' }}
      </view>
      <Spacer height="20" />
      <Divider width="650" />
      <Spacer height="20" />
      <view>
        <!-- 机构 -->
        <view class="flex items-center">
          <image src="../static/images/building.png" class="h-24rpx w-24rpx flex-shrink-0" />
          <Spacer width="16" />
          <view class="h-32rpx overflow-hidden text-ellipsis text-24rpx text-#666666 leading-32rpx">
            {{ classDetail?.place || '未知' }}
          </view>
        </view>
        <Spacer height="12" />
        <!-- 时间 -->
        <view class="flex items-center">
          <image src="../static/images/clock.png" class="h-24rpx w-24rpx flex-shrink-0" />
          <Spacer width="16" />
          <view class="h-32rpx overflow-hidden text-ellipsis text-24rpx text-#666666 leading-32rpx">
            {{ classDetail?.start_time || '未知时间' }}
          </view>
        </view>
      </view>
      <Spacer height="20" />
      <Divider width="650" />
      <Spacer height="20" />
      <view class="text-26rpx text-#666666 leading-40rpx">
        <MpHtml :content="classDetail?.content || '未知内容'" />
      </view>
    </view>
    <!-- 标题卡片 END -->
    <Spacer height="20" />
    <view class="grid grid-cols-2 gap-20rpx">
      <ClassHomeAction title="扫码签到" subtitle="点击扫描二维码" :icon="cardIcon0" @tap="handleTapScanQRCode" />
      <ClassHomeAction title="培训资料" subtitle="点击查看相关资料" :icon="cardIcon1" @tap="handleTapTrainingResources" />
      <ClassHomeAction title="通讯录" subtitle="查看班级通讯录" :icon="cardIcon2" @tap="handleTapContacts" />
      <ClassHomeAction title="班级交流" subtitle="一对一留言交流" :icon="cardIcon3" @tap="handleTapClassExchange" />
      <ClassHomeAction title="课程安排" subtitle="查看课程情况" :icon="cardIcon4" @tap="handleTapCourseSchedule" />
      <ClassHomeAction title="班级相册" subtitle="更多精彩瞬间" :icon="cardIcon5" @tap="handleTapClassPhotos" />
      <ClassHomeAction title="教学评估" subtitle="点击进行评估" :icon="cardIcon6" @tap="handleTapAssessment" />
      <ClassHomeAction title="班级动态" subtitle="点击查看更多公告" :icon="cardIcon7" @tap="handleTapClassNews" />
    </view>
    <Spacer height="240" />
  </view>
</template>

<route lang="yaml">
name: 'classHome'
style:
  navigationBarTitleText: '班级主页'
</route>
